import Link from "next/link";
import Router from "next/router";
import { Popover, Avatar } from "antd";
import { useState } from "react";
import {
  TagsOutlined,
  ShareAltOutlined,
  HeartFilled,
  HighlightOutlined,
} from "@ant-design/icons";
// import ReactMarkdown from 'react-markdown'
import marked from "marked";
import hljs from "highlight.js";
import "highlight.js/styles/monokai-sublime.css";
import moment from "moment";
import CommentComponent from "./comment";

import "../../static/style/components/article.less";

// 初始化定义makedown解析器
const renderer = new marked.Renderer();
marked.setOptions({
  renderer: renderer,
  gfm: true,
  pedantic: false,
  sanitize: false,
  tables: true,
  breaks: false,
  smartLists: true,
  smartypants: false,
  highlight: function (code) {
    return hljs.highlightAuto(code).value;
  },
});

// console.log(window.location.href, 'location.href')

const ArticleComponent = (prop) => {
  const article = prop.data;
  const [rewardVisible, setReward] = useState(false);
  const [qrCode, setQRCode] = useState({
    alipay: "/static/images/reward/alipay.jpg",
    wechat: "/static/images/reward/wechat.png",
  });
  const [postList, setPostList] = useState([
    "/static/images/post/1.jpg",
    "/static/images/post/2.jpg",
    "/static/images/post/3.jpg",
  ]);

  const [avatarClass, setAvatarClass] = useState("");
  const onAvatar = () => {
    setAvatarClass("click-ani");
    setTimeout(() => {
      setAvatarClass("");
    }, 300);
  };

  let html = marked(article.content);

  return (
    <>
      <div className="header-bg">
        <div
          className="bg"
          style={{
            backgroundImage: `url(${
              postList[Math.floor(Math.random() * postList.length)]
            })`,
          }}
        ></div>
        <h1 className="article-tit">{article.title}</h1>
      </div>
      <div className="content">
        <h1 className="title">{article.title}</h1>
        <p className="last">
          最后更新时间：{moment(article.updatedAt).fromNow()}
        </p>
        <article
          className="article"
          dangerouslySetInnerHTML={{ __html: html }}
        ></article>
        {/* 打赏、点赞、分享 */}
        <div className="share">
          <div className="share-left">
            <Popover
              placement="right"
              content={
                <div className="qr">
                  <div className="qr-img">
                    <img src={qrCode.alipay} alt="" />
                    <p>支付宝</p>
                  </div>
                  <div className="qr-img">
                    <img src={qrCode.wechat} alt="" />
                    <p>微信</p>
                  </div>
                </div>
              }
              // trigger='click'
              // visible={rewardVisible}
            >
              <div
                className="reward"
                // onClick={() => {
                //   console.log(rewardVisible, 'rewardVisible')
                //   setReward(rewardVisible ? false : true)
                // }}
              >
                赏
              </div>
            </Popover>

            <div className="tags">
              <TagsOutlined />
              <ul className="tag-list">
                {article.tags && article.tags.length
                  ? article.tags.map((el) => {
                      return <li className="tag-item">{el}</li>;
                    })
                  : ""}
              </ul>
            </div>
          </div>
          <div className="share-right">
            <div className="share-box">
              <ShareAltOutlined />
            </div>
            <div
              className="like"
              onClick={() => {
                prop.setLike("add");
              }}
            >
              <HeartFilled />
              <span>{article.likeCount}</span>
            </div>
          </div>
        </div>
        {/* 版权 */}
        <div className="open-message">
          <div className="open-left">
            <p>
              声明：Cat享|版权所有，违者必究|如未注明，均为原创|本网站采用
              <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/">
                BY-NC-SA
              </a>
              协议进行授权
            </p>
            <p>
              转载：转载请注明原文链接 -{" "}
              <a href={""} target="_blank">
                {article.title}
              </a>
            </p>
          </div>
          <div className="opern-right">
            <i>!</i>
          </div>
        </div>
        {/* 上下篇 */}
        <div className="change-art">
          <div className="prev-art">Prev Article</div>
          <div className="next-art">Next Article</div>
        </div>
        {/* 作者 */}
        <div className="author">
          <div className={"avatar " + avatarClass} onClick={onAvatar}>
            <Avatar size={56} src={article.userInfo.avatar} />
          </div>
          <p className="author-text">{article.userInfo.nickname}</p>
          <div className="user-slogan">
            <HighlightOutlined className="slogan-icon" />
            <span className="user-slogan-text">
              {article.userInfo.slogan.slice(0, 30)}
            </span>
          </div>
        </div>
        {/* 评论 */}
        <CommentComponent data={article} />
      </div>
    </>
  );
};
export default ArticleComponent;
